<template>
  <div class="address-selector">
    <div style="width: 20%;">
      <el-select
        v-model="selectedRegion[0]"
        placeholder="请选择省份"
        @change="updateRegion(1)"
        style="width: 100%;"
        :disabled="dis"
      >
        <el-option
          v-for="option in currentOptions[0]"
          :key="option.code"
          :label="option.name"
          :value="option.code"
        />
      </el-select>
    </div>
    <div style="width: 20%;">
      <el-select
        v-model="selectedRegion[1]"
        placeholder="请选择城市"
        @change="updateRegion(2)"
        style="width: 100%;"
        :disabled="dis"
      >
        <el-option
          v-for="option in currentOptions[1]"
          :key="option.code"
          :label="option.name"
          :value="option.code"
        />
      </el-select>
    </div>
    <div style="width: 20%;">
      <el-select
        v-model="selectedRegion[2]"
        placeholder="请选择区县"
        @change="updateRegion(3)"
        style="width: 100%;"
        :disabled="dis"
      >
        <el-option
          v-for="option in currentOptions[2]"
          :key="option.code"
          :label="option.name"
          :value="option.code"
        />
      </el-select>
    </div>
    <div style="width: 20%;">
      <el-select
        v-model="selectedRegion[3]"
        placeholder="请选择街道"
        @change="updateRegion(4)"
        style="width: 100%;"
        :disabled="dis"
      >
        <el-option
          v-for="option in currentOptions[3]"
          :key="option.code"
          :label="option.name"
          :value="option.code"
        />
      </el-select>
    </div>
    <div style="width: 20%;">
      <el-select
        v-model="selectedRegion[4]"
        placeholder="请选择社区"
        @change="updateRegion(5)"
        style="width: 100%;"
      >
        <el-option
          v-for="option in currentOptions[4]"
          :key="option.code"
          :label="option.name"
          :value="option.code"
        />
      </el-select>
    </div>
    <div style="width: 20%;">
      <el-input style="width: 100%;" v-model="detail"></el-input>
    </div>
  </div>
</template>

<script>
import {listBasicPublicRegion} from "@/api/basicPublic/basicPublicRegion/index";

export default {
  name: 'Cascader',
  props: {
    options: {
      type: Object,
    },
    dis: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      selectedRegion: ['', '', '', '', ''], // 初始值设置为河南省郑州市中原区林山寨街道碧沙岗社区居委会
      currentOptions: [[], [], [], [], []], // 初始化为五个空数组
      detail: undefined,
      address: {
        provinceCode: undefined,//户籍地址-省代码
        cityCode: undefined,//户籍地址-市代码
        areaCode: undefined,//户籍地址-区代码
        streetCode: undefined,//户籍地址-街道代码
        committeeCode: undefined,//户籍地址-社区代码
        detail: undefined,//户籍地址-详细地址
      },
    };
  },
  methods: {
    updateRegion(index) {
      // 清除后续的选择
      this.selectedRegion.splice(index);
      let Data1 = {
        level: 1,
      }
      let Data2 = {
        parentCode: undefined
      }
      if (index == 0) {
        listBasicPublicRegion(Data1).then(res => {
          this.currentOptions[index] = res.rows
        })
      } else {
        if (this.options) {

          Data2.parentCode = this.options.streetCode
        } else {
          Data2.parentCode = this.selectedRegion[index - 1]
        }
        listBasicPublicRegion(Data2).then(res => {
          this.currentOptions[index] = res.rows
        })
      }

    },
    handleChange(value) {
      // 你可以在这里触发一个事件，将选中的地址传递出去
      this.$emit('update:address', value);
    }
  },
  watch: {
    selectedRegion: {
      handler(newVal) {
        if (this.options) {
          this.address.provinceCode = this.options.provinceCode
          this.address.cityCode = this.options.cityCode
          this.address.areaCode = this.options.areaCode
          this.address.streetCode = this.options.streetCode
          this.address.committeeCode = this.options.committeeCode
        } else {
          this.address.provinceCode = newVal[0]
          this.address.cityCode = newVal[1]
          this.address.areaCode = newVal[2]
          this.address.streetCode = newVal[3]
          this.address.committeeCode = newVal[4]
        }
        this.handleChange(this.address);
      },
      deep: true
    },
    detail: {
      handler(newVal) {
        this.address.detail = newVal
        this.handleChange(this.address);
      },
      deep: true
    },
  },
  mounted() {
    // 初始化时调用 updateRegion 来更新 currentOptions
    this.updateRegion(0);
    setTimeout(() => {
      if (this.options && Object.values(this.options).length > 0) {
        this.updateRegion(4)
        this.selectedRegion = [this.options.province, this.options.city, this.options.area, this.options.street, this.options.committee];
        this.detail = this.options.detail
      }
    }, 1000)

  }
};
</script>

<style scoped>
.address-selector {
  width: 50vw;
  display: flex;
  gap: 10px;
}

.el-select {
  flex: 1;
}
</style>
